<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-20 16:38:37
 * @FilePath: \wczd-mobile\src\pages\task\task.vue
-->
<template>
  <div class="task">
    <div class="firstTopPanel">
      <div class="top-block">
        <image @click="backClick" class="back-btn" src="../../static/back-btn.png"></image>
        <div class="title">风险点</div>
      </div>
      
      <div class="header-bottom">
        <div class="task-name">任务名称：{{taskInfo.taskName}}</div>
        <div class="task-date" v-show="taskInfo.taskStartTm">{{taskInfo.taskStartTm}} 至 {{taskInfo.taskEndTm}}</div>
      </div>
    </div>
    <div class="container">
      <div class="task-cont">
        <div class="cont-item" v-for="(item,index) in nodeList" :key="index">
          <div class="title">
            <div class="left">{{item.nodeName}}</div>
            <div class="right danger-state" :style="{color:item.isInspection==='0'?'#F54A13':item.isInspection==='1'?'#FFB500':'#17D46F'}">{{item.isInspection==='0'?'未排查':item.isInspection==='1'?'排查中':'已排查'}}</div>
          </div>
          <div class="center cont-item-text">
            <div class="f right-item">
              <div class="xbfb30">排查隐患数</div>
              <div class="xbfb60">{{item.taskDangerCount}}</div>
            </div>
          </div>
          <div class="footer" @click="_goInfo(item)">
            <div class="left">
              {{item.isInspection==='2'?'点击查看详情':'点击填写排查结果'}}
            </div>
            <div class="right">
              <image src="@/static/wczd/more.png" alt=""></image>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getWhInspectionTask,getRoadNodeByTaskId,getRoadNodeOtherByTaskId } from "@/api/task";

export default {
  name: 'task',
  data () {
    return {
		nodeList: [],
		taskInfo: {
			taskName: null,
			taskStartTm: null,
			taskEndTm: null
		}
    }
  },
  created(){},
  onLoad: function (option) { 
		this.taskInfo.id = option.id
  },
  onShow(){
    this.getWhInspectionTask()
    this.getRoadNodeByTaskId()
  },
  methods: {
    //获取任务详情
    getWhInspectionTask(){
      getWhInspectionTask({id: this.taskInfo.id}).then(res => {
        for(var d in this.taskInfo){
          this.taskInfo[d] = res.data[d]
        }
      })
    },
    //任务节点
    getRoadNodeByTaskId(){
      getRoadNodeByTaskId({taskId: this.taskInfo.id,}).then(res => {
        this.nodeList = res
      })
    },
    // 进入详情
    _goInfo (item) {
      uni.navigateTo({
        url: '/pages/task/task-edit?nodeId='+item.id+'&taskId='+item.taskId+'&objUniqueCode='+item.objUniqueCode+'&isInspection='+item.isInspection
      })
    },
    backClick(){
      uni.navigateBack()
    }
  },
}
</script>

<style scoped lang="scss">
.task {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .container {
    flex: 1;
    overflow-x: hidden;
    overflow-y: scroll;
    .cont-item {
      margin: 20upx auto 20upx;
      width: 680upx;
      background-color: #fff;
      border-radius: 10upx;
      padding: 15upx 30upx 0 30upx;
      .cont-item-text{
        display: flex;
        flex-direction: column;
      }

      .title {
        display: flex;
        justify-content: space-between;
        .left {
          padding-left: 20upx;
          font-size: 30upx;
          font-weight: bold;
          &::before {
            content: "";
            position: relative;
            left: -20upx;
            height: 30upx;
            width: 3upx;
            border-left: 3px solid #009fdf;
          }
        }
        .right {
          color: #f54a13;
          font-size: 30upx;
        }
      }
      .center {
        padding: 10upx 0;
        display: flex;
        color: #8d9093;
        .left {
          border-radius: 8upx;
          image {
            width: 160upx;
            height: 160upx;
            border-radius: 8upx;
          }
        }
        .right {
          .right-item {
            padding: 0 10upx 0 20upx;
          }
        }
      }
      .footer {
        height: 80upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #e8e9e9;
        .left {
          font-weight: bold;
          color: #009fdf;
          font-size: 26upx;
        }
        .right {
          display: flex;
          align-items: center;
          image {
            width: 56upx;
            height: 56upx;
          }
        }
      }
    }
  }
}

.firstTopPanel {
  width: 100%;
  background: white;
  background-size: 100% 100%;
  .title {
    padding-top: 120upx;
    font-size: 40upx;
    font-weight: bold;
    padding-left: 40upx;
  }
  .select {
    display: flex;
    padding: 10upx;
    justify-content: space-evenly;
    margin: auto;
    width: 700upx;
    margin-top: 70upx;
    height: 80upx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 6upx;
    .select-item {
      width: 170upx;
      height: 64upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6upx;
      color: #75787b;
    }
    .selected {
      width: 170upx;
      height: 64upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 6upx;
      background: #009fdf;
      color: #fff;
    }
  }
}

.right-flex{
  flex: 1;
}
.header-bottom{
  padding: 10upx 10upx 10upx 40upx;

  .task-name{
    font-weight: 600;
    padding: 10upx 40upx 10upx 10upx;
    font-size: 30upx;
  }
  .task-date{
    color: #75787b;
    padding: 10upx 40upx 10upx 10upx;
    font-size: 30upx;
  }
}

.firstTopPanel{
  .top-block{
    padding-top: 20upx;
    display: flex;
    padding-left: 20upx;
    align-items: center;

    .back-btn{
      width: 56upx;
      height: 56upx;
    }
    .title{
      padding-top: 0;
      padding-left: 15upx;
    }
  }
}


</style>
